<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-radio-group @change="getDataList()" v-model="dataForm.selDateAdd" size="small">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="今日"></el-radio-button>
          <el-radio-button label="昨日"></el-radio-button>
          <!-- <el-radio-button label="本周"></el-radio-button> -->
          <el-radio-button label="其他"></el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-show="dataForm.selDateAdd == '其他'">
        <el-date-picker size="small"
          v-model="otherDate"
          @change="getDataList()"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        ></el-date-picker>
      </el-form-item>
      <!--      <el-form-item v-show="dataForm.selDateAdd == '其他'" style="display: none;">
        <el-button size="small" icon="el-icon-search" @click="getDataList()">搜索</el-button>
           <el-button v-if="isAuth('hotel:thotelsmshistory:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('Common.Insert') }}</el-button>
        <el-button v-if="isAuth('hotel:thotelsmshistory:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">{{ $t('Common.BulkDelete') }}</el-button>
      </el-form-item> -->

      <el-form-item style="float: right;">
        <!-- <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input> -->
        <el-select v-model="dataForm.state" @change="getDataList()" placeholder="请选择" size="small">
          <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- <el-button @click="getDataList()">{{ $t('Common.Query') }}</el-button> -->
        <!--    <el-button v-if="isAuth('hotel:thotelsmshistory:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('Common.Insert') }}</el-button>
        <el-button v-if="isAuth('hotel:thotelsmshistory:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">{{ $t('Common.BulkDelete') }}</el-button> -->
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
      <el-table-column prop="id" header-align="center" align="center" label="序号" width="80"></el-table-column>

      <el-table-column prop="batchNumber" header-align="center" align="center" label="批次号" width="160"></el-table-column>

      <el-table-column prop="phone" header-align="center" align="center" label="号码" width="120"></el-table-column>

      <el-table-column prop="content" header-align="center" align="center" label="内容">
        <template slot-scope="scope">
          <el-popover
            placement="top-start"
            width="280"
            trigger="hover"
            :content="scope.row.content">
            <el-button size="small" icon="el-icon-mouse" slot="reference">移动鼠标查看</el-button>
          </el-popover>
        </template>


      </el-table-column>

      <el-table-column prop="state" header-align="center" align="center" label="状态" width="120">
        <template slot-scope="scope">
          <span v-html="formtState(scope.row.state)"></span>
        </template>
      </el-table-column>

      <el-table-column prop="creatTime" header-align="center" align="center" label="时间" width="160"></el-table-column>
<!--      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      stateOptions: [
        {
          label: '请选择',
          value: ''
        },
        {
          label: '已关闭',
          value: 0
        },
        {
          label: '已发送',
          value: 1
        },
        {
          label: '发送中',
          value: 2
        },
        {
          label: '待退款',
          value: 3
        },
        {
          label: '已退款',
          value: 4
        }
      ],
      dataForm: {
        state: '',
        selDateAdd: '全部',
        otherDate: '',
        phone: '',
        sysUserId: '',
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      otherDate: ''
    };
  },
  components: {
  },
  activated() {
    this.getDataList();
  },
  mounted: function() {
    this.getDataList();
  },
  methods: {
    init(tel,sellerId) {
      this.$nextTick(() => {
        this.dataForm.phone = tel;
        this.dataForm.sysUserId = sellerId;
        console.log(tel);
        this.getDataList();
      });
    },
    formtState(state) {
      var stratStr = '<span class="el-tag ';
      var centerStr = ' el-tag--medium">';
      var endStr = '</span>';
      switch (state) {
        case 0:
          return stratStr + 'el-tag--danger' + centerStr + '发送失败' + endStr;
          break;
        case 1:
          return stratStr + 'el-tag--success' + centerStr + '发送成功' + endStr;
          break;
        case 2:
          return stratStr + '' + centerStr + '正在发送' + endStr;
          break;
        case 3:
          return stratStr + 'el-tag--info' + centerStr + '待退款' + endStr;
          break;
        case 4:
          return stratStr + 'el-tag--info' + centerStr + '已退款' + endStr;
          break;
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      if (this.otherDate && this.dataForm.selDateAdd == '其他') {
        const start = Date.parse(new Date(this.otherDate[0])) / 1000;
        const end = Date.parse(new Date(this.otherDate[1])) / 1000;
        this.dataForm.otherDate = start + ',' + end;
        console.log(this.dataForm.otherDate);
      }
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelsmshistory/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          ...this.dataForm
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    }
  }
};
</script>
